<template>
  <el-card class="invoice-table">
    <div slot="header" class="clearfix">
      <h2 class="invoice-title">电子发票</h2>
    </div>
    <div class="invoice-content">
      <div class="invoice-header">
        <div class="invoice-header-item">
          <label>购买方信息:</label>
          <div>
            购方姓名:
            <span>{{addr.addressName}}</span>
          </div>
          <div>
            购买方电话:
            <span>{{addr.addressTel}}</span>
          </div>
          <div>
            购买方地址:
            <span>
              {{ addr.province }}{{ addr.city }}{{ addr.county
              }}{{ addr.detail }}
            </span>
          </div>
        </div>
        <div class="invoice-header-item">
          <label>销售方信息:</label>
          <div>
            销售方:
            <span>中移</span>
          </div>
          <div>
            销售方电话:
            <span>10086</span>
          </div>
          <div>
            销售方地址：
            <span>江苏省南京市江宁区南京瑞力彩虹谷2号楼</span>
          </div>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="buyNum" label="数量" align="center"></el-table-column>
        <el-table-column prop="productPrice" label="单价" align="center"></el-table-column>
        <el-table-column label="金额" align="center">
          <template slot-scope="scope">{{totalAmount(scope.row.buyNum,scope.row.productPrice)}}</template>
        </el-table-column>
      </el-table>
      <div class="invoice-footer">
        <div class="invoice-footer-item">
          <label>合计:</label>
          <div>{{totalPrice}}</div>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="24" :offset="20">
        <el-button
          @click="printContent"
          style="margin-top: 10px;"
        >打印电子发票</el-button>
        <el-button
          @click="back"
          icon="el-icon-back"
          style="margin-top: 10px;"
        >返回</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      tableData: [],
      addr: [],
      totalPrice: ""
    };
  },
  methods: {
    back(){
        this.$router.push({path:"/ZYProductList"})
    },
    totalAmount(num, price) {
      return Number(num * price).toFixed(2);
    },
    printContent() {
        let invoice={
            orderDetails: this.tableData,
            address: this.addr,
            totalPrice: this.totalPrice,
        }
        this.$axios.post('api/order-server/addInvoice',invoice).then(res=>{
            console.log(res.data);
        });
        window.print();
    },
    queryInvoice() {
      this.$axios.post("api/order-server/queryInvoice", this.id).then(res => {
        console.log(res.data);
        this.addr = res.data.data.address;
        this.tableData = res.data.data.orderDetails;
        this.tableData.forEach(e => {
          this.totalPrice += Number(e.buyNum * e.productPrice).toFixed(2);
        });
        console.log(this.tableData);
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.queryInvoice();
  }
};
</script>

<style scoped>
.invoice-table {
  width: 80%;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.invoice-title {
  text-align: center;
  color: #303133;
  font-weight: bold;
  margin-bottom: 20px;
}

.invoice-content {
  display: flex;
  flex-direction: column;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.invoice-header-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.invoice-header input {
  width: 100%;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding-left: 10px;
  outline: none;
}

.invoice-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.invoice-footer input {
  width: 100%;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding-right: 10px;
  outline: none;
}
.noprint {
  display: none;
}
</style>